import React, { useState } from 'react';
import Taro from '@tarojs/taro';
import {View, Text, Swiper, SwiperItem, Image} from '@tarojs/components'
import {IndexDiyModuleGood, IndexDiyModule} from '../../utils/server.interface'
import {gotoPage} from '../../utils/tools'
import RightArrow from '../../components/icon/right-arrow'
import Float from '../../components/float/float';
import './index-sale.scss'

const IndexSaleMost: React.FC<IndexDiyModule<IndexDiyModuleGood[]>> = (props: any) => {

  const [data, setData] = useState(() => {
    if (props.data.length > 0) {
      const ret: any = []
      for (let i = 0; i < props.data.length; i += 3) {
        ret.push(props.data.slice(i, i + 3))
      }
      return ret
    } else {
      return []
    }
  })
  const dataColor = Taro.getStorageSync('colorData');
  return (
    <View className='index-sale-most index-sale-box index-sale-box-other'>
      {(props.name || props.moreUrl) && <View className='title-box'>
        <View className='title'>{props.name}</View>
        {!!props.moreUrl && <View className='more' onClick={() => gotoPage(props.moreUrl)}>
          <Text>更多</Text>
          <RightArrow />
        </View>}
      </View>}
      {!props.name && !props.moreUrl && <View style='height: 13px' />}
      <Swiper className='content-box' displayMultipleItems={props.data.length < 3 ? props.data.length : 3} autoplay interval={5000} circular>
        {data.length > 0 && props.data.map(item => <SwiperItem className='big-item' key={item.id}>
          <View className='small-item' style='padding:0'>
            <View className='small-item zz' onClick={()=>{Taro.navigateTo({url: item.url})}}>
              <View className='title'>{item.name}</View>
              <View className='flex'>
                {!!item.price &&
                <View className='inline shangxin-today-block-item-bottom-price' style='color: #fff;'><Text
                  className='shangxin-today-block-item-bottom-price-before'
                >￥</Text>
                  <Float value={item.price || 0} />
                </View>}
                {(item.discount || item.is_activity == 1) && !!item.price && <Text
                  className='box-discount'
                  style={` background-color: ${dataColor.priceColor};  `}
                >{item.is_activity == 1 ? '拼团价' : `${item.discount}折`}</Text>}
                {(!!item.markt_price || !!item.marktPrice) && !!item.price &&
                <Text className='shangxin-today-block-item-bottom-original'>{item.markt_price || item.marktPrice}</Text>}
              </View>
            </View>
            <Image src={item.main_img || item.img} mode='aspectFill' className='img' />
          </View>
        </SwiperItem>)}
      </Swiper>
    </View>
  )
}
IndexSaleMost.defaultProps = {
  name: '',
  moreUrl: '',
  data: [],
  type: ''
}

export default IndexSaleMost
